<template>
	<div class="content-page">
		<div class="content-nav">
			<el-breadcrumb class="breadcrumb" separator="/">
				<el-breadcrumb-item :to="{ path: '/dashboard' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>活动管理</el-breadcrumb-item>
				<el-breadcrumb-item>活动列表</el-breadcrumb-item>
			</el-breadcrumb>
			<div class="operation-nav">
				<router-link to="/dashboard/game/add">
					<el-button type="primary" icon="plus">添加活动</el-button>
				</router-link>
			</div>
		</div>
		<div class="content-main">
			<div class="filter-box">
				<el-form :inline="true" :model="filterForm" class="demo-form-inline">
					<el-form-item label="活动名称">
						<el-input v-model="filterForm.name" placeholder="活动名称"></el-input>
					</el-form-item>
					<el-form-item label="选择日期">
						<el-date-picker v-model="filterForm.time" type="datetimerange" placeholder="选择时间范围" format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
					<el-button type="primary" @click="onSubmitFun">查询</el-button>
				</el-form>
			</div>
			<div class="form-table-box">
				<el-table ref="multipleTable" :data="tabList[`${activeName}`][`tableData`]" style="width: 100%" border stripe
				 @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>
					<el-table-column prop="id" label="ID">
					</el-table-column>
					<el-table-column prop="activityName" label="活动名称">
					</el-table-column>
					<el-table-column label="活动时间">
						<template scope="scope">
							{{scope.row.startDate}} - {{scope.row.endDate}}
						</template>
					</el-table-column>
					<el-table-column prop="created" label="创建时间">
					</el-table-column>
					<el-table-column label="操作" width="200">
						<template scope="scope">
							<el-button size="small" @click="handleRowEdit(scope.$index, scope.row)">编辑</el-button>
							<el-dropdown @command="handleCommand">
								<el-button type="primary" size="small">
									更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item :command="{type:'link'}">
										<router-link :to="{name: 'game_user' ,query:{id:scope.row.id,name:scope.row.activityName}}">查看上传用户</router-link>
									</el-dropdown-item>
									<el-dropdown-item :command="{type:'copy',id:scope.row.id}"><a v-clipboard:copy="`${config.backUrl}/game?id=${scope.row.id}`" v-clipboard:success="onCopy"
										 v-clipboard:error="onError">复制链接</a></el-dropdown-item>
									<el-dropdown-item :command="{type:'del',id:scope.row.id}">删除</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div class="page-box flex">
				<div class="page-box-l">
					<div class="page-box-l">
						<el-button @click="toggleSelection(1)">批量删除</el-button>
						<el-button @click="toggleSelection(2)">取消选择</el-button>
					</div>
				</div>
				<div class="flex-1">
					<el-pagination @current-change="handlePageChange" :current-page="tabList[`${activeName}`][`page`]" :page-size="20"
					 layout="total, prev, pager, next, jumper" :total="tabList[`${activeName}`][`total`]">
					</el-pagination>
				</div>

			</div>
		</div>
		<!-- <el-dialog title="详情" :visible.sync="dialogFormVisible" @close="closeDialog">
			<el-form ref="form" :model="form" label-width="80px">
				<el-form-item label="活动名称">
					{{form.shortName}}
				</el-form-item>
				<el-form-item label="活动时间">
					{{form.shortDesc}}
				</el-form-item>
				<el-form-item label="创建时间">
					{{form.uploader}}
				</el-form-item>
				<el-form-item label="用户手机">
					{{form.telephone}}
				</el-form-item>
				<el-form-item label="视频状态">
					{{form.status==1?"通过":(form.status==0?'等待':'驳回')}}
				</el-form-item>
				<el-form-item label="创建时间">
					{{form.created}}
				</el-form-item>
				<video-player class="video-player vjs-custom-skin" v-if="form.shortUrl" ref="videoPlayer" :playsinline="true"
				 :options="video_Config"></video-player>
			</el-form>
			<div slot="footer" class="dialog-footer" v-if="form.status==0">
				<el-button @click="reviewShortFun(2)">驳回</el-button>
				<el-button type="primary" @click="reviewShortFun(1)">通过</el-button>
			</div>
		</el-dialog> -->
	</div>
</template>

<script>
	import {
		getActivityList,
		delActivity,
		reviewShort
	} from '@/api/permission'
	import videoConfig from '@/assets/js/videoConfig'
	import config from '@/config/baseUrl'
	export default {
		data() {
			return {
				video_Config: videoConfig,
				config:config,
				activeName: 'first',
				multipleSelection: [],
				filterForm: {
					name: '',
					time: []
				},
				tabList: {
					'first': {
						tableData: [],
						page: 0,
						total: null
					},
					'second': {
						tableData: [],
						page: 0,
						total: null,
						status: 0
					},
					'third': {
						tableData: [],
						page: 0,
						total: null,
						status: 1
					},
					'fourth': {
						tableData: [],
						page: 0,
						total: null,
						status: 2
					}
				},
				form: {
					activityName: '',
					shortDesc: '',
					shortId: '',
					shortUrl: '',
					telephone: '',
					created: ''
				},
				dialogFormVisible: false
			}
		},
		methods: {
			handleCommand(command) {
				let self = this
				if (command.type == 'del') {
					self.handleRowDelete(command.id)
				}
			},
			onCopy(e) { // 复制成功
				this.$message({
					message: '复制成功！',
					type: 'success'
				})
			},
			onError(e) { // 复制失败
				this.$message({
					message: '复制失败！',
					type: 'error'
				})
			},
			onSubmitFun() {
				let self = this
				let fliter = {
					activityName: self.filterForm.name
				}
				let tablist = self.tabList[self.activeName]
				tablist.page = 0
				if (self.filterForm.time.length) {
					fliter.start = self.parserDate(new Date(self.filterForm.time[0]))
					fliter.end = self.parserDate(new Date(self.filterForm.time[1]))
				}
				self.getList(fliter)
			},
			p(s) {
				return s < 10 ? '0' + s : s
			},
			parserDate(d) {
				return d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
			},
			handlePageChange(val) {
				let self = this
				let tablist = self.tabList[self.activeName]
				tablist.page = val -1
				//保存到localStorage
				localStorage.setItem('userPage', this.page)
				localStorage.setItem('userFilterForm', JSON.stringify(this.filterForm));
				let fliter = {
					activityName: self.filterForm.name
				}
				if (self.filterForm.time.length) {
					fliter.start = self.parserDate(new Date(self.filterForm.time[0]))
					fliter.end = self.parserDate(new Date(self.filterForm.time[1]))
				}
				this.getList(fliter)
			},
			handleRowEdit(index, row) {
				this.$router.push({
					name: 'game_add',
					query: {
						id: row.id
					}
				})
			},
			handleRowDelete(categoryIdLists) {
				this.$confirm('确定要删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					delActivity({
						ids: categoryIdLists
					}).then((response) => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
						this.onSubmitFilter();
					})
				});
			},
			onSubmitFilter() {
				let self = this
				let tablist = self.tabList[self.activeName]
				tablist = {
					tableData: [],
					page: 0,
					total: null
				}
				this.getList()
			},
			getList(fliter) {
				let self = this
				let tablist = self.tabList[self.activeName]
				let page = tablist.page
				let data = {
					index: page, // 页码
					size: 20,
					status: tablist.status,
				}
				typeof fliter != 'undefined' ? Object.assign(data, fliter) : ''
				getActivityList(data).then((response) => {
					tablist.tableData = response.content
					tablist.page = response.currentPage + 1
					tablist.total = response.totalRecords 
				})
			},
			toggleSelection(type) {
				let rows = this.multipleSelection
				if (type == 1 && rows.length) {
					let categoryIdLists = ''
					rows.forEach(row => {
						if (row) {
							categoryIdLists = categoryIdLists + row.id + ','
						}
					});
					this.handleRowDelete(categoryIdLists)
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleClick(tab, v) {
				let self = this
				let tablist = self.tabList[self.activeName]
				self.onSubmitFilter()
			},
			closeDialog() {
				this.video_Config[`sources`][0].src = ''
			}
		},
		components: {

		},
		mounted() {
			this.getList();
		}
	}
</script>

<style>
	.el-dropdown {
		margin-left: 15px;
	}
</style>
